import {Breadcrumb} from "antd";
import {Link, useLocation} from "react-router-dom";
import LogFactory from "@/log/LogFactory.ts";
import {useEffect, useState} from "react";
import {BreadcrumbItemType} from "antd/es/breadcrumb/Breadcrumb";
import {navMap} from "@/test/mock.tsx";

const log = LogFactory.getLogger("BreadcrumbComponent");
log.empty();
const BreadcrumbComponent = () => {
    const pathname = useLocation().pathname;
    const [data, setData] = useState<BreadcrumbItemType[]>([]);
    useEffect(() => {
        const paths = pathname.split("/");
        const items: BreadcrumbItemType[] = [];
        for (let i = 1; i < paths.length; i++) {
            const path_ = paths.slice(0,i + 1).join("/") ;
            const title = navMap.get(paths[i]);
            // log.debug("遍历路由: ",paths[i], title , path_);
            if (pathname === path_){
                items.push({title})
            }else {
                items.push({title: <Link to={path_}>{title}</Link>});
            }
        }
       setData(items);
    }, [pathname]);

    return (
        <Breadcrumb style={{ margin: '16px 0' }} items={data}/>
    );
};

export default BreadcrumbComponent;